<template>
  <div class="main-content">
    <div class="screen-frame clearfix">
      <div class="col-md-6 col-lg-5">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 col-sm-2 control-label">楼盘名称：</label>
            <div class="col-md-8 col-sm-10">
              <el-select class=""
                         v-model="params.objectId"
                         filterable
                         placeholder="请选择"
                         :clearable="true"
                         style="width:100%">
                <el-option v-for="item in findPremisesList"
                           :key="item.premisesId"
                           :label="item.premisesName"
                           :value="item.premisesId">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 col-sm-2 control-label">时间范围：</label>
            <div class="col-md-4 col-sm-5">
              <input class="form-control"
                     v-model="params.beginDate"
                     style="padding: 0px 0px 0px 0px;"
                     type="date"
                     id="beginDate" />
            </div>
            <div class="col-md-4 col-sm-5">
              <input class="form-control"
                     v-model="params.endDate"
                     style="padding: 0px 0px 0px 0px;"
                     type="date"
                     id="endDate" />
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-5">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 col-sm-2 control-label">时间区间：</label>
            <div class="col-md-8 col-sm-10"
                 style="width:73%">
              <select class="form-control"
                      v-model="params.timeType"
                      @change="chooseTimeType">
                <option v-for="(row, index) in dateSelectList"
                        :value="row.value"
                        :key="index">{{row.label}}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <label for=""
                   class="col-md-3 col-sm-2 control-label"></label>
            <div class="col-md-8 col-sm-10">
              <button class="btn btn-theme"
                      @click="list(1)"
                      style="color: white;">查询</button>
              <button class="btn btn-theme"
                      v-if="exportBtnShow"
                      @click="exportInfo()"
                      style="color: white;">导出</button>
              <button class="btn btn-theme"
                      v-if="!exportBtnShow"
                      @click="exportRepeatMsg()"
                      style="color: white; background-color: #999;">导出{{ timeOut }}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="table table-striped table-bordered">
      <div class="table-responsive">
        <table class="table table-striped table-bordered min-width-790">
          <thead>
            <tr>
              <td width="8%"
                  style="text-align: center;">
                统计日期
              </td>
              <td width="10%"
                  style="text-align: right;">
                {{params.beginDate}}
              </td>
              <td width="5%">
                至
              </td>
              <td style="text-align: left;">
                {{params.endDate}}
              </td>
            </tr>
          </thead>
        </table>
      </div>
      <div class="table-responsive">
        <table class="table table-striped table-bordered min-width-790">
          <thead>
            <tr>
              <th width="40%">楼盘</th>
              <th width="20%">点击量</th>
              <th width="20%">电话量</th>
              <th width="20%">关闭量</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row,index) in premisesFlowList"
                :key="index">
              <td>{{row.premisesName}}</td>
              <td>{{row.clickCount}}</td>
              <td>{{row.telCount}}</td>
              <td>{{row.closeCount}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="laypage_flow_report"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        beginDate: "",
        endDate: "",
        objectId: "",
        timeType: "",
      },
      dateSelectList: [
        { value: "", label: "自定义" },
        { value: "1", label: "昨日" },
        { value: "2", label: "今日" },
        { value: "3", label: "本周" },
        { value: "4", label: "本月" },
      ],
      premisesFlowList: [],
      findPremisesList: [],
      exportBtnShow: true,
      timeOut: 10,
    };
  },
  mounted: function () {
    $("input[name=datetimepicker]").datetimepicker({
      format: "yyyy-mm-dd",
      autoclose: true,
      minView: 2,
    });
    this.list();
    this.findPremisesLists();
  },
  methods: {
    chooseTimeType: function () {
      var _self = this;
      var timeType = _self.params.timeType;
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getTimeInterval";
      var body = {};
      var reqParam = {};
      reqParam.timeType = timeType;
      body.params = reqParam;
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == 1) {
          _self.params.beginDate = resData.beginDate;
          _self.params.endDate = resData.endDate;
        }
      });
    },
    list: function (type) {
      var loadIndex = layer.load();
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getPremisesFlowList";
      var body = {};
      //判断点查询按钮时，将当前页和条数设置为默认
      if (type == "1") {
        _self.params.pageNo = 1;
        _self.params.pageSize = 10;
      }

      let intervalDays = this.utils.intervalTime(_self.params.beginDate, _self.params.endDate);
      if(intervalDays > 31){
        layer.close(loadIndex);
        layer.msg("最多查询31天的数据!");
        return false;
      }
      
      body.params = _self.params;
      _self.$http.post(url, body).then((response) => {
        layer.close(loadIndex);
        var body = response.body.resData;
        if (body.result == 0) {
          layer.layer("流量统计数据获取失败!");
        } else {
          _self.premisesFlowList = body.data.rows;
          var totalPages = body.data.totalPages;
          var current = body.data.pageNumber;
          var total = body.data.total;
          if (totalPages > 0) {
            layui.laypage.render({
              elem: $("#laypage_flow_report"), //容器。值支持id名、原生dom对象，jquery对象,
              limit: _self.params.pageSize,
              curr: current,
              count: total,
              theme: "#f87242;", //皮肤
              first: "首页", //若不显示，设置false即可
              last: "尾页", //若不显示，设置false即可
              prev: "上一页", //若不显示，设置false即可
              next: "下一页", //若不显示，设置false即可
              limits: [10, 20, 50, 100, 200],
              layout: ["prev", "page", "next", "skip", "count", "limit"],
              jump: function (obj, first) {
                if (!first) {
                  _self.params.pageNo = obj.curr;
                  _self.params.pageSize = obj.limit;
                  _self.list();
                }
              },
            });
          }
        }
      });
    },
    findPremisesLists: function () {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getCaseMemberList";
      var body = {};
      body.params = {
        userId: window.localStorage.getItem("userId"),
      };
      _self.$http.post(url, body).then((response) => {
        _self.findPremisesList = response.body.resData.caseMemberList;
      });
    },
    exportInfo: function () {
      var loadIndex = layer.load();
      var _self = this;
      var userId = window.localStorage.getItem("1_userId");
      var objectId = _self.params.objectId;
      var beginDate = _self.params.beginDate;
      var endDate = _self.params.endDate;
      var timeType = _self.params.timeType;

      let intervalDays = this.utils.intervalTime(beginDate, endDate);
      if(intervalDays > 31){
        layer.close(loadIndex);
        layer.msg("最多查询31天的数据!");
        return false;
      }
      _self.exportBtnShow = false;
      var url =
        this.utilHelper.apiUrl +
        "/api/getPremisesFlowReportExport?params.userId=" +
        userId +
        "&params.beginDate=" +
        beginDate +
        "&params.endDate=" +
        endDate +
        "&params.objectId=" +
        objectId +
        "&params.loginType=1" +
        "&params.timeType=" +
        timeType;
      location.href = url;
      var exportInterval = setInterval(function () {
        if (_self.timeOut <= 0) {
          window.clearInterval(exportInterval);
          _self.timeOut = 10;
          _self.exportBtnShow = true;
        } else {
          _self.timeOut -= 1;
        }
      }, 1000);
      layer.close(loadIndex);
    },
    exportRepeatMsg: function () {
      var _self = this;
      layer.msg(_self.timeOut + "秒后可再次导出,请稍等片刻!");
      return;
    },
  },
};
</script>